<template>
	<uni-nav-bar title="发起预约" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package search">
		<input class="uni-input" confirm-type="search" placeholder="搜索群" @confirm="confirm" v-model="search"
			@input="interrogate" />
	</view>
	<view v-for="(child,childindex) in crowdList" :key="childindex" @click="itemClick(child.chat_id)"
		class="space-between package">
		<view style="width:70%">{{child.name}}</view>
		<view class="but"
			:style="{color:active==child.chat_id?'#fff':'',background:active==child.chat_id?'#3F90FF':''}">发群
		</view>
	</view>
	<Popu v-if="crowdList&&crowdList.length<1" :pageHeight="500" text="暂无群信息"></Popu>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { ref } from 'vue';
	import { showLoading, errorToast,successToast } from '@/utils/prompt';
	import { getQunList } from '@/gql/dispatch';
	import { toPublish } from '@mqtt';
	const search = ref('')
	const inquireAbout = ref(false)
	const crowdList = ref([])
	const active = ref(0)
	// init()
	function init() {
		showLoading()
		const payload = {
			query: getQunList,
			variables: {
				region_id: 1,
				keywords: search.value,
			},
		};
		toPublish(
			'ql/control/getQunList',
			payload,
			(obj : any) => {
				const { getQunList } = obj.data;
				crowdList.value = getQunList
			}
		);
	}
	function itemClick(num : string) {
		active.value = num
		showLoading()
		const payload = {
			chat_id: num
		};
		toPublish(
			'control/fasongQunSubscribe',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					successToast(msg)
				} else {
					errorToast(msg)
				}
			}
		);
	}
	/**
	 * 搜索内容
	 * @property {Object} evt 监听搜索框输入信息
	 */
	function interrogate(evt : any) {
		const { detail } = evt;
		if (!detail.value && inquireAbout) {
			init();
		}
	}
	/**
	 * 搜索
	 */
	function confirm() {
		if (search.value) {
			inquireAbout.value = search.value ? true : false;
			init();
		} else {
			errorToast('请输入您要搜索的内容')
		}
	}
</script>

<style lang="less">
	.search {
		border-radius: 30px;
		text-align: center;
		color: #666;
	}

	.but {
		width: 104rpx;
		height: 45rpx;
		background: #eee;
		border-radius: 5px;
		text-align: center;
		font-size: 24rpx;
		line-height: 45rpx;
	}
</style>